<template>
  <div class="uc-total">
    <div class="uc-top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>{{ucmag}}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="top-left">
        <h4 id="uc1" style="cursor:pointer"><a @click="toSinglemsg">个人信息</a></h4>
        <h4 id="uc2" style="cursor:pointer"><a @click="tostudymsg">学习记录</a></h4>
      </div>
    </div>
    <div class="uc-content">
      <keep-alive>
        <component :is="ucName" :username="username"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Singlemsg from '@/components/user/Singlemsg.vue'
import Studymsg from '@/components/user/Studymsg.vue'
export default {
  props:{
    username:{
      type:String,
    }
  },
  data(){
    return{
      ucmag:'个人信息',
      ucName: 'Singlemsg',
    }
  },
  methods:{
    //个人信息
    toSinglemsg(){
      const that = this
      that.ucName = 'Singlemsg'
      document.getElementById("uc1").style.color = "black"
      document.getElementById("uc2").style.color = "#999"
    },
    //学习记录
    tostudymsg(){
      const that = this
      that.ucName = 'Studymsg'
      document.getElementById("uc1").style.color = "#999"
      document.getElementById("uc2").style.color = "black"
    }
  },
  components:{
    Singlemsg,
    Studymsg
  }
}
</script>

<style lang="less" scoped>
.uc-total{
  margin: 20px;
  width: 100%;
  .uc-top{
    width: 100%;
    .top-left{
      display: flex;
      float: left;
      width: 100%;
      border-bottom: 1px solid rgb(32, 32, 32);
      h4{
        margin: 30px 5px;
        color: #999;
      }
      #uc1{
        color: black;
      }
    }
  }
  .uc-content{
    margin-top: 100px;
    width: 60%;
    height: 800px;
    margin-left: 20%;
  }
}
</style>
